<!DOCTYPE html>
<html lang="en">
<!--**
 *
 *----------Created by 黄伟峰 on 2018/4/10.----------
 * 　　　┏┓　　　┏┓
 * 　　┏┛┻━━━┛┻┓
 * 　　┃　　　　　　　┃
 * 　　┃　　　━　　　┃
 * 　　┃　┳┛　┗┳　┃
 * 　　┃　　　　　　　┃
 * 　　┃　　　┻　　　┃
 * 　　┃　　　　　　　┃
 * 　　┗━┓　　　┏━┛
 * 　　　　┃　　　┃神兽保佑
 * 　　　　┃　　　┃代码无BUG！
 * 　　　　┃　　　┗━━━┓
 * 　　　　┃　　　　　　　┣┓
 * 　　　　┃　　　　　　　┏┛
 * 　　　　┗┓┓┏━┳┓┏┛
 * 　　　　　┃┫┫　┃┫┫
 * 　　　　　┗┻┛　┗┻┛
 * ━━━━━━神兽出没━━━━━━by:web_hwf@sina.com
 *-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--响应式约束-->
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1 user-scalable=no"/>
    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">

    <link rel="stylesheet" href="index.css">

    <style>
        .shadow_pad{
            z-index: 0;
            position: relative;
            width: 100px;
            height: 35px;
            float: right;
        }
        .shadow_pad:before{
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 3;
            border-width:  0 14px 10px 0;
            border-style: solid;
            border-color: #c90d1e #c90d1e #fff #fff ;
            background: #c90d1e;
            display: block;
            width: 0;
            box-shadow: 1px -1px 1px rgba(0,0,0,0.3), 2px -2px 1px rgba(0,0,0,0.2)
        }
        .shadow_alt{
            position: relative;
            -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            background-color: #f50000;
            width: 100px;
            height: 35px;
            line-height: 35px;
            display: inline-table;
            text-align: center;
            font-size: 15px;
            color: #fff;
        }


        .shadow_alt:before,
        .shadow_alt:after {
            content: "";
            position: absolute;
            z-index: -2;
            bottom: 15px;
            left: 10px;
            width: 35%;
            height: 20%;
            max-width: 150px;
            -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
            -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
            box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            -ms-transform: rotate(-3deg);
            -o-transform: rotate(-3deg);
            transform: rotate(-10deg);
        }

        .shadow_alt:after {
        content:"";
        position:absolute;
        z-index:-2;
        right:10px;
        left:auto;
        -webkit-transform:rotate(3deg);
        -moz-transform:rotate(3deg);
        -ms-transform:rotate(3deg);
        -o-transform:rotate(3deg);
        transform:rotate(3deg);
        }

        .shadow_pad2{
            z-index: 0;
            position: relative;
            width: 100px;
            height: 35px;
            float: right;
        }
        .shadow_alt2{
            position: relative;

            background-color: #eb0e21;
            width: 100px;
            height: 35px;
            line-height: 35px;
            display: inline-table;
            text-align: center;
            font-size: 15px;
            color: #fff;
        }
        .shadow_alt2:before{
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            border-width: 0 14px 10px 0;
            border-style: solid;
            border-color: #c90d1e #c90d1e #fff #fff ;
            background: #c90d1e;
            display: block;
            width: 0;
            box-shadow: 1px -1px 1px rgba(0,0,0,0.3), 2px -2px 1px rgba(0,0,0,0.2)
        }


        .alt_text {
            position: absolute;
            top: 15px;
            right: 0;
            font-size: 12px;
            background-color: #F73458;
            color: #ffffff;
            padding: 2px 10px 2px 15px;
        }
        .alt_text:after {
             content: '◣';
             color: #ffffff;
             font-size: 40px;
             position: absolute;
             left: -4px;
             top: -10px;
         }
    </style>
</head>
<body>

<div class="row">
    <div class="box_list">
        <div class="box_item shadow shadow-lifted"></div>
        <!--<div class="box_item shadow shadow-perspective"></div>-->
        <div class="box_item shadow shadow-sides shadow-sides-vt-2"></div>
        <div class="box_item shadow shadow-sides shadow-sides-hz-1"></div>
        <div class="box_item shadow shadow-sides shadow-sides-hz-2"></div>
        <div class="box_item shadow shadow-raised"></div>
        <div class="box_item shadow shadow-rotated"></div>
        <div class="box_item shadow show-box"></div>

        <div class="shadow_pad">
            <div class="shadow_alt">刘大帅要的</div>
        </div>

        <div class="shadow_pad2">
            <div class="shadow_alt2">刘大帅要的</div>
        </div>
        <span class="alt_text">程度：紧急</span>

    </div>
</div>
</body>
</html>